import axios from "axios";
import { React, useRef } from "react";
import "../../theCSS/anniu.css";
import "./register.css";
import yanzhengma from "../loginID/img/verify.png";
import { Link, useNavigate } from "react-router-dom";

import InterIP from '../../IP/IP'

export default function Register() {
  let IP = InterIP().props.children;
  const valref_shouji = useRef();
  const valref_shouji_1 = useRef();
  const valref_mima = useRef();
  const valref_mima_1 = useRef();
  const valref_mima2 = useRef();
  const valref_mima2_1 = useRef();
  const valref_yan1 = useRef();
  const valref_yan1_1 = useRef();
  const valref_yan2 = useRef();
  const valref_yan2_1 = useRef();
  const ref_radio = useRef();
  const navigate = useNavigate();

  function register() {
    var login_shuru = document.getElementsByClassName("login_shuru");
    var login_jinggao = document.getElementsByClassName("login_jinggao");
    for (var i = 0; i < login_shuru.length; i++) {
      if (login_shuru[i].value === "") {
        login_jinggao[i].style.color = "red";
      }
    }
    if (valref_mima2.current.value !== valref_mima.current.value) {
    }

    if (valref_shouji.current.value.length !== 11) {
      valref_shouji_1.current.style.color = "red";
    }
    if (
      valref_shouji.current.value !== "" &&
      valref_mima.current.value !== "" &&
      valref_mima2.current.value === valref_mima.current.value &&
      valref_yan1.current.value === "xqcr" &&
      ref_radio.current.checked
    ) {
      axios
        .post("http://" + IP + ":3000/register/l", {
          user: valref_shouji.current.value,
          pass: valref_mima.current.value,
          code: "1",
        })
        .then((res) => {
          alert(res.data.msg);
          if (res.data.msg === "注册成功！") {
            navigate("/loginID");
          }
        });
    }
  }

  function change_content() {
    valref_shouji_1.current.style.color = "transparent";
  }
  function change_content1() {
    valref_mima_1.current.style.color = "transparent";
  }
  function change_content2() {
    valref_mima2_1.current.style.color = "transparent";
  }
  function change_content3() {
    valref_yan1_1.current.style.color = "transparent";
  }
  function change_content4() {
    valref_yan2_1.current.style.color = "transparent";
  }

  function login_huophonecode() {
    axios
      .post("http://" + IP + ":3000/login/authCode", {
        id: "1",
      })
      .then((res) => {
        alert(res.data[0].code);
      });
  }

  return (
    <div className="login_main login_main2">
      <div className="login_biaoti login_biaoti2">注册</div>
      <input
        type="text"
        className="login_shuru login_shuru2"
        placeholder="请输入手机号"
        ref={valref_shouji}
        onChange={change_content}
      ></input>
      <div className="login_jinggao login_jinggao2_r" ref={valref_shouji_1}>
        请输入手机号!
      </div>
      <input
        type="password"
        className="login_shuru login_shuru2"
        placeholder="请输入密码"
        ref={valref_mima}
        onChange={change_content1}
      ></input>
      <div className="login_jinggao login_jinggao2_r" ref={valref_mima_1} >
        请输入密码!
      </div>
      <input
        type="password"
        className="login_shuru login_shuru2"
        placeholder="请再次输入密码"
        ref={valref_mima2}
        onChange={change_content2}

      ></input>
      <div className="login_jinggao login_jinggao2_r" ref={valref_mima2_1}>
        请再次输入密码!
      </div>

      <div id="login_yanzheng">
        <input
          type="text"
          className="login_shuru login_shuru2"
          id="yanzhengma"
          placeholder="验证码"
          ref={valref_yan1}
          onChange={change_content3}
        ></input>
        <img src={yanzhengma} alt=""></img>
        <span>看不清换一张</span>
      </div>

      <div className="login_jinggao login_jinggao2_r" ref={valref_yan1_1}>
        请输入验证码!
      </div>

      <div className="login_phonecode">
        <input
          type="text"
          className="login_shuru login_shuru2"
          placeholder="手机验证码"
          ref={valref_yan2}
          onChange={change_content4}
        ></input>
        <button onClick={login_huophonecode}>获取验证码</button>
      </div>
      <div className="login_jinggao login_jinggao2_r" ref={valref_yan2_1}>
        请输入手机验证码!
      </div>

      <div id="box1">
        <input
          type="radio"
          className="login_radio login_radio2"
          ref={ref_radio}
        ></input>
        <span>我已阅读并同意《礼拜五用户协议》</span>
      </div>

      <div className="login_jinggao login_jinggao2_r">
        您没有同意《礼拜五用户协议》
      </div>
      <div className="login_dibutton login_dibutton2">
        <button className="login_chengse login_chengse2" onClick={register}>
          注册
        </button>
        <Link to="/loginID">
          <button className="login_lvse login_lvse2">返回登录</button>
        </Link>
      </div>
    </div>
  );
}
